<div class="content__title">
    <h1>
        A Full Demo Tables
    </h1>
</div>
<nz-card>
    <form nz-form>
        <div nz-row nz-form-item [nzGutter]="16">
            <div nz-form-label nz-col [nzSm]="2">
                <label for="name">Name</label>
            </div>
            <div nz-form-control nz-col [nzSm]="5">
                <nz-input [(ngModel)]="args.name" name="name" [nzId]="'name'"></nz-input>
            </div>
            <div nz-form-label nz-col [nzSm]="2">
                <label>Created</label>
            </div>
            <div nz-form-control nz-col [nzSm]="8">
                <div nz-row>
                    <div nz-form-control nz-col [nzSpan]="11">
                        <nz-datepicker [(ngModel)]="args.created_begin" name="created_begin" [nzPlaceHolder]="'begin'"></nz-datepicker>
                    </div>
                    <div nz-col [nzSpan]="1">
                        <p nz-form-split>-</p>
                    </div>
                    <div nz-form-control nz-col [nzSpan]="11">
                        <nz-datepicker [(ngModel)]="args.created_end" name="created_end" [nzPlaceHolder]="'end'"></nz-datepicker>
                    </div>
                </div>
            </div>
            <div nz-form-label nz-col [nzSm]="2">
                <label>Gender</label>
            </div>
            <div nz-form-control nz-col [nzSm]="5">
                <nz-dropdown>
                    <a class="ant-dropdown-link" nz-dropdown>
                        {{args.gender ? args.gender : 'unlimit'}} <i class="anticon anticon-down"></i>
                    </a>
                    <ul nz-menu>
                        <li nz-menu-item (click)="args.gender=''">unlimit</li>
                        <li nz-menu-item (click)="args.gender='male'">male</li>
                        <li nz-menu-item (click)="args.gender='female'">female</li>
                    </ul>
                </nz-dropdown>
                <span class="text-grey-light">(only valid)</span>
            </div>
        </div>
        <div nz-row nz-form-item [nzGutter]="16" class="mb0">
            <div nz-form-label nz-col [nzSm]="2">
                <label for="userid">User ID</label>
            </div>
            <div nz-form-control nz-col [nzSm]="5">
                <nz-input [(ngModel)]="args.userid" name="userid" [nzId]="'userid'" [nzPlaceHolder]="'placeholder'"></nz-input>
            </div>
            <div nz-form-label nz-col [nzSm]="2">
                <label>Modified</label>
            </div>
            <div nz-form-control nz-col [nzSm]="8">
                <div nz-row>
                    <div nz-form-control nz-col [nzSpan]="11">
                        <nz-datepicker [(ngModel)]="args.modified_begin" name="modified_begin" [nzPlaceHolder]="'begin'"></nz-datepicker>
                    </div>
                    <div nz-col [nzSpan]="1">
                        <p nz-form-split>-</p>
                    </div>
                    <div nz-form-control nz-col [nzSpan]="11">
                        <nz-datepicker [(ngModel)]="args.modified_end" name="modified_end" [nzPlaceHolder]="'end'"></nz-datepicker>
                    </div>
                </div>
            </div>
            <div nz-col [nzSm]="5" [nzOffset]="2">
                <button nz-button [nzType]="'primary'" (click)="load(1)" [nzLoading]="loading"><span>Search</span></button>
                <button nz-button (click)="clear()" [disabled]="loading">Clear</button>
            </div>
        </div>
    </form>
</nz-card>
<div nz-row [nzGutter]="16">
    <div nz-col [nzMd]="24">
        <nz-card>
            <div class="mb-sm text-right">
                <nz-dropdown>
                    <button nz-button nz-dropdown [disabled]="!_allChecked && !_indeterminate">
                        <span>Export</span> <i class="anticon anticon-down"></i>
                    </button>
                    <ul nz-menu>
                        <li nz-menu-item>Excel</li>
                        <li nz-menu-item>JSON</li>
                        <li nz-menu-item>PNG</li>
                    </ul>
                </nz-dropdown>
            </div>
            <nz-table #nzTable
                [nzAjaxData]="list"
                [nzShowSizeChanger]="true"
                [nzLoading]="loading"
                [nzTotal]="total"
                [(nzPageIndex)]="pi"
                (nzPageIndexChange)="load()"
                [(nzPageSize)]="ps"
                (nzPageSizeChange)="load()">
                <thead nz-thead>
                    <tr>
                        <th nz-th [nzCheckbox]="true">
                            <label nz-checkbox
                                [(ngModel)]="_allChecked" [nzIndeterminate]="_indeterminate"
                                (ngModelChange)="_checkAll()">
                            </label>
                        </th>
                        <th nz-th><span>Avatar</span></th>
                        <th nz-th><span>Name</span></th>
                        <th nz-th><span>Age</span></th>
                        <th nz-th><span>Email</span></th>
                        <th nz-th><span>Event</span></th>
                        <th nz-th><span>Price</span></th>
                        <th nz-th><span>Registered</span></th>
                        <th nz-th><span>Actions</span></th>
                    </tr>
                </thead>
                <tbody nz-tbody>
                    <tr nz-tbody-tr *ngFor="let data of nzTable.data">
                        <td nz-td [nzCheckbox]="true">
                            <label nz-checkbox [(ngModel)]="data.checked"
                                (ngModelChange)="refChecked()">
                            </label>
                        </td>
                        <td nz-td>
                            <nz-avatar [nzSrc]="data.picture.thumbnail" [nzSize]="'large'"></nz-avatar>
                        </td>
                        <td nz-td>{{data.name.first}} {{data.name.last}}</td>
                        <td nz-td>
                            <nz-tag *ngIf="data.gender=='female'" [nzColor]="'pink'">female</nz-tag>
                            <nz-tag *ngIf="data.gender=='male'" [nzColor]="'green'">male</nz-tag>
                        </td>
                        <td nz-td>{{data.email}}</td>
                        <td nz-td style="width: 90px">
                            <mini-bar height="15" theme="mini" color="#999" borderWidth="3" [padding]="[0, 0, 0, 0]" [data]="events"></mini-bar>
                        </td>
                        <td nz-td>{{data.price | _currency}}</td>
                        <td nz-td>{{data.registered | _date: 'YYYY年MM月DD日'}}</td>
                        <td nz-td>
                            <a (click)="showMsg('Edit')">Edit</a>
                            <span nz-table-divider></span>
                            <nz-popconfirm [nzTitle]="'Are you sure？'" [nzOkText]="'ok'" [nzCancelText]="'cancel'" (nzOnConfirm)="showMsg('has deleted')" (nzOnCancel)="showMsg('cancel delete')">
                                <a nz-popconfirm>Delete</a>
                            </nz-popconfirm>
                        </td>
                    </tr>
                </tbody>
            </nz-table>
        </nz-card>
    </div>
</div>
